<template>
  <view class="pages">
    <view class="top">
      <text class="top-text">为了保证您的账户安全,请先进行验证</text>
      <view class="phone">
        <!-- <text class="text">手机号</text> -->
        <input
          class="input"
          v-model="phone"
          maxlength="11"
          type="number"
          placeholder="输入手机号码"
          placeholder-style="font-size:28rpx"
        />
      </view>
      <view class="code">
        <view style="display: flex">
          <!-- <text class="text">验证码</text> -->
          <input
            class="input"
            v-model="code"
            type="text"
            placeholder="请输入验证码"
            placeholder-style="font-size:28rpx"
          />
        </view>
        <text class="codetext" :class="{ active: !isShow }" @click="getCode">{{
          isShow ? "获取验证码" : count + "秒重新获取"
        }}</text>
      </view>
    </view>
    <view class="bottom">
      <view class="phone">
        <!-- <text class="text">设置密码</text> -->
        <input
          class="input"
          v-model="password"
          type="password"
          placeholder="输入新的密码"
          placeholder-style="font-size:28rpx"
        />
      </view>
      <view class="phone" style="border: none">
        <!-- <text class="text">确认密码</text> -->
        <input
          class="input"
          v-model="password1"
          type="password"
          placeholder="再次输入密码"
          placeholder-style="font-size:28rpx"
        />
      </view>
      <text
        style="
          font-size: 28rpx;
          color: rgb(144, 147, 153);
          margin-top: 16rpx;
          margin-bottom: 64rpx;
        "
        >密码需包含数字、英文字母、特殊字符中的任意2种，且至少8位字符</text
      >
    </view>
    <button class="btn" @click="goSign()">确认</button>
  </view>
</template>

<script>
import { httpRequest } from "../../utils/http";
export default {
  name: "UniPresetVueVite1Sign",

  data() {
    return {
      code: "",
      phone: "",
      password: "",
      password1: "",
      count: 59,
      isShow: true,
    };
  },

  methods: {
    async getCode() {
      if (!this.isShow) return;
      if (!this.phone.trim())
        return uni.showToast({
          title: "请输入手机号",
          icon: "error",
        });
      if (!this.isPhoneNumber(this.phone))
        return uni.showToast({ title: "请输入正确手机号", icon: "none" });
      this.isShow = false;
      const res = await httpRequest("/api/sendingPhoneCode", "POST", {
        phone: this.phone,
      });
      const timeId = setInterval(() => {
        this.count--;
        if (this.count <= 0) {
          this.isShow = true;
          clearInterval(timeId);
          this.count = 59;
        }
      }, 1000);
    },
    async goSign() {
      if (!this.isPhoneNumber(this.phone))
        return uni.showToast({ title: "请输入正确手机号", icon: "none" });
      if (!this.code) return uni.showToast({ title: "请输入验证码", icon: "none" });
      if (this.password != this.password1)
        return uni.showToast({ title: "两次密码输入不一致", icon: "none" });
      if (!this.isValidAlphanumeric(this.password))
        return uni.showToast({ title: "密码格式不正确", icon: "none" });
      const res = await httpRequest("/api/determinePhoneCode", "POST", {
        phone: this.phone,
        code: this.code,
        password: this.password,
      });
      console.log(res);
      if (!res.success) {
        return uni.showToast({
          title: res.message,
          icon: "error",
        });
      }
      if (res.success) {
        uni.showToast({
          title: "重置成功",
        });
        setTimeout(() => {
          uni.navigateBack({ delta: 1 });
        }, 1000);
      }
    },
    isPhoneNumber(phone) {
      const phoneRegex = /^1[0-9]{10}$/; // 手机号简单校验，假设手机号为11位数字且以1开头
      return phoneRegex.test(phone);
    },
    isValidAlphanumeric(input) {
      const regex = /^[a-zA-Z0-9]{6,20}$/;
      return regex.test(input);
    },
  },
};
</script>

<style lang="scss" scoped>
.pages {
  background-color: #fff;
  overflow: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  .input {
    box-sizing: border-box;
    background-color: rgb(245, 245, 245);
    border-radius: 304rpx;
    width: 612rpx;
    height: 88rpx;
    padding-left: 40rpx;
  }
  .top {
    margin-bottom: 48rpx;
    padding: 0 70rpx;
    margin-top: 64rpx;
    .top-text {
      font-size: 36rpx;
      color: rgb(48, 49, 51);
      font-weight: 500;
    }
    .phone {
      height: 90rpx;
      display: flex;
      align-items: center;
      margin-bottom: 24rpx;
      margin-top: 24rpx;
      .text {
        font-size: 28rpx;
        color: rgb(69, 70, 74);
        margin-right: 42rpx;
      }
    }
    .code {
      height: 90rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .codetext {
        z-index: 99;
        position: absolute;
        right: 108rpx;
        font-size: 28rpx;
        color: rgb(64, 158, 255);
      }
      .text {
        font-size: 28rpx;
        color: rgb(69, 70, 74);
        margin-right: 42rpx;
      }
    }
  }
  .bottom {
    margin-bottom: 48rpx;
    padding: 0 70rpx;
    margin-top: 24rpx;
    .phone {
      height: 90rpx;
      display: flex;
      align-items: center;
      margin-bottom: 24rpx;
      .text {
        font-size: 28rpx;
        color: rgb(69, 70, 74);
        margin-right: 42rpx;
      }
    }
  }
  .btn {
    width: 612rpx;
    height: 88rpx;
    border-radius: 428rpx;
    background-color: rgb(64, 158, 255);
    color: #fff;
    font-size: 32rpx;
    line-height: 88rpx;
  }
}
.active {
  color: #b8b5b5 !important;
}
</style>
